<template>

  <div>
    <van-nav-bar
        title="房间列表"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

    <van-tabs v-model:active="activeName" @change="handleTabChange" @click-tab="onClickTab" swipeable>
      <van-tab title="正在使用" name="a">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
            <van-cell v-for="userRoom in roomList">
              <template #title>
                <div class="dv1">
                  <van-card
                      class="card"
                      tag="标签"
                      desc="描述信息"
                      title="商品标题"
                  >
                    <template #price v-if="userRoom.availableType === 0">
                      <div style="color: red">已过期</div>
                    </template>

                    <template #price v-if="userRoom.availableType === 1">
                      <div style="color: #3fb5a7">未过期 还有{{userRoom.restDays}}天</div>
                    </template>

                    <template #price v-if="userRoom.availableType === 2">
                      <div style="color: #535bf2">
                        {{userRoom.startMonth}}月{{userRoom.startDay}}日可以入住
                      </div>
                    </template>

                    <template #desc>{{userRoom.hotelRoom.info}}<br></template>
                    <template #title>{{userRoom.hotelRoom.name}}<br></template>

                    <template #tags>
                      <div v-if="userRoom.hotelRoom.type === 1" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">经济</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">舒适</van-tag>
                      </div>
                      <div v-if="userRoom.hotelRoom.type === 2" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">高大上</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">设备齐全</van-tag>
                      </div>
                      <div v-if="userRoom.hotelRoom.type === 3" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">奢华</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">环境好</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">贴心服务</van-tag>
                      </div>
                      <div v-if="userRoom.hotelRoom.type === 4" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">限时优惠</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">小礼品</van-tag>
                      </div>
                      <van-rate v-model="userRoom.hotelRoom.rate" style="display: flex; justify-content: flex-end; height: 25px" allow-half readonly></van-rate>
                    </template>

                    <template #num>
                      <van-button style="width: 70px" size="small" type="primary" @click="renewRoom(userRoom)">续费</van-button>
                    </template>

                    <template #thumb>
                      <van-image v-if="userRoom.hotelRoom.type === 1" src="src/image/room4.png"></van-image>
                      <van-image v-if="userRoom.hotelRoom.type === 2" src="src/image/room5.png"></van-image>
                      <van-image v-if="userRoom.hotelRoom.type === 3" src="src/image/room6.png"></van-image>
                      <van-image v-if="userRoom.hotelRoom.type === 4" src="src/image/room7.png"></van-image>
                    </template>

                  </van-card>
                </div>
              </template>
            </van-cell>
          </van-list>

        </van-pull-refresh>
      </van-tab>

      <van-tab title="即将使用" name="b">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
            <van-cell v-for="userRoom in roomList">
              <template #title>
                <div class="dv1">
                  <van-card
                      class="card"
                      tag="标签"
                      desc="描述信息"
                      title="商品标题"
                  >
                    <template #price v-if="userRoom.availableType === 0">
                      <div style="color: red">已过期</div>
                    </template>

                    <template #price v-if="userRoom.availableType === 1">
                      <div style="color: #3fb5a7">未过期 还有{{userRoom.restDays}}天</div>
                    </template>

                    <template #price v-if="userRoom.availableType === 2">
                      <div style="color: #535bf2">
                        {{userRoom.startMonth}}月{{userRoom.startDay}}日可以入住
                      </div>
                    </template>

                    <template #desc>{{userRoom.hotelRoom.info}}<br></template>
                    <template #title>{{userRoom.hotelRoom.name}}<br></template>

                    <template #tags>
                      <div v-if="userRoom.hotelRoom.type === 1" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">经济</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">舒适</van-tag>
                      </div>
                      <div v-if="userRoom.hotelRoom.type === 2" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">高大上</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">设备齐全</van-tag>
                      </div>
                      <div v-if="userRoom.hotelRoom.type === 3" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">奢华</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">环境好</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">贴心服务</van-tag>
                      </div>
                      <div v-if="userRoom.hotelRoom.type === 4" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">限时优惠</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">小礼品</van-tag>
                      </div>
                      <van-rate v-model="userRoom.hotelRoom.rate" style="display: flex; justify-content: flex-end; height: 25px" allow-half readonly></van-rate>
                    </template>

                    <template #thumb>
                      <van-image v-if="userRoom.hotelRoom.type === 1" src="src/image/room4.png"></van-image>
                      <van-image v-if="userRoom.hotelRoom.type === 2" src="src/image/room5.png"></van-image>
                      <van-image v-if="userRoom.hotelRoom.type === 3" src="src/image/room6.png"></van-image>
                      <van-image v-if="userRoom.hotelRoom.type === 4" src="src/image/room7.png"></van-image>
                    </template>

                  </van-card>
                </div>
              </template>
            </van-cell>
          </van-list>

        </van-pull-refresh>

      </van-tab>

      <van-tab title="已过期" name = "c">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
            <van-cell v-for="userRoom in roomList">
              <template #title>
                <div class="dv1">
                  <van-card
                      class="card"
                      tag="标签"
                      desc="描述信息"
                      title="商品标题"
                  >
                    <template #price v-if="userRoom.availableType === 0">
                      <div style="color: red">已过期</div>
                    </template>

                    <template #price v-if="userRoom.availableType === 1">
                      <div style="color: #3fb5a7">未过期 还有{{userRoom.restDays}}天</div>
                    </template>

                    <template #price v-if="userRoom.availableType === 2">
                      <div style="color: #535bf2">
                        {{userRoom.startMonth}}月{{userRoom.startDay}}日可以入住
                      </div>
                    </template>

                    <template #desc>{{userRoom.hotelRoom.info}}<br></template>
                    <template #title>{{userRoom.hotelRoom.name}}<br></template>

                    <template #tags>
                      <div v-if="userRoom.hotelRoom.type === 1" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">经济</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">舒适</van-tag>
                      </div>
                      <div v-if="userRoom.hotelRoom.type === 2" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">高大上</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">设备齐全</van-tag>
                      </div>
                      <div v-if="userRoom.hotelRoom.type === 3" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">奢华</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">环境好</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">贴心服务</van-tag>
                      </div>
                      <div v-if="userRoom.hotelRoom.type === 4" style="margin-top: 5px">
                        <van-tag plain type="primary" size="large">限时优惠</van-tag>
                        <van-tag plain type="primary" size="large" style="margin-left: 5px">小礼品</van-tag>
                      </div>
                      <van-rate v-model="userRoom.hotelRoom.rate" style="display: flex; justify-content: flex-end; height: 25px" allow-half readonly></van-rate>
                    </template>

                    <template #thumb>
                      <van-image v-if="userRoom.hotelRoom.type === 1" src="src/image/room4.png"></van-image>
                      <van-image v-if="userRoom.hotelRoom.type === 2" src="src/image/room5.png"></van-image>
                      <van-image v-if="userRoom.hotelRoom.type === 3" src="src/image/room6.png"></van-image>
                      <van-image v-if="userRoom.hotelRoom.type === 4" src="src/image/room7.png"></van-image>
                    </template>

                  </van-card>
                </div>
              </template>
            </van-cell>
          </van-list>

        </van-pull-refresh>

      </van-tab>

    </van-tabs>

  </div>

</template>

<script setup>

import {ref} from "vue";
import {showToast} from "vant";
import {post} from "../util/request.js";
import axios from "axios";

// 导入pinia
import {useStore} from "../pinia/index.js";
// 声明pinia
const store = useStore();

// 导入useRouter使用路由
import { useRouter } from "vue-router";
// 声明变量
const router = useRouter()

// 要传递给后端的参数
let listType = ref("");
const roomList = ref([
  {
    availableType:0,
    days:0,
    restDays:0,
    startMonth:0,
    startDay:0,
    endMonth:0,
    endDay:0,
    hotelRoom:{
      id:0,
      name:'',
      type:0,
      rate:0.0,
      position:'',
      status:0,
      info:'',
      price:0.0,
      utime:''
    },
  }
])
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const back = () => {
  history.back();
}

const activeName = ref("a");
listType.value = activeName.value

const handleTabChange = (name) => {

  listType.value = name;
  onLoad();

}

const onClickTab = ({ name }) => {

  // console.log(name)
  listType.value = name;
  // console.log(listType.value);
  onLoad()

}

const showRoomList = (data) => {

  post("/hotel/room/showUserRoom",{listType:data}).then(r => {
    if (r.code == 0) {
      roomList.value = r.data
    } else {
      showToast("获取失败")
    }
    // 加载状态结束
    loading.value = false;
    // 加载完毕停止加载
    finished.value = true;
  }).catch(function (){
    showToast("服务器异常")
  })

  // axios({
  //   method:'post',
  //   url:'http://localhost:8081/api/hotel/room/showUserRoom',
  //   params:{
  //     listType: listType
  //   }
  // }).then((data) => {
  //   // 接收响应数据,data封装了响应的数据
  //   const res = data.data;
  //   // console.log("data"+JSON.stringify(res.data));
  //   if (res.code == 0) {
  //     roomList.value = res.data
  //   } else {
  //     showToast("获取失败")
  //   }
  //   // 加载状态结束
  //   loading.value = false;
  //   // 加载完毕停止加载
  //   finished.value = true;
  // }).catch(function (){
  //   showToast("服务器异常")
  // })

}

const onLoad = () => { // list展示时触发,用于获取数据

  setTimeout(() => {
    if (refreshing.value) {
      roomList.value = [];
      refreshing.value = false;
    }

    // 发起axios异步请求,刷新
    showRoomList(listType.value)

  }, 1000);

};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

const renewRoom = (userRoom) => {

  console.log("room:" + JSON.stringify(userRoom))
  // 存入全局变量
  store.setUserRoom(userRoom)

  // 跳转路由页面
  router.push("/renewRoom")

}

</script>

<style scoped>

.card {
  --van-card-font-size: 15px;
  --van-card-title-line-height: 30px;
  --van-card-desc-line-height:30px;
  --van-card-thumb-size: 170px;
  --van-card-price-integer-font-size: 25px;
  --van-card-price-font-size: 20px;
  --van-card-origin-price-font-size: 14px;
  --van-card-price-color: orange;
}

.dv1 {
  text-align: left
}

</style>
